<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>      
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link href="css/UserCSS.css" rel="stylesheet" type="text/css" />
    <script src="js/jquery3.min.js" type="text/javascript"></script>
    <script src="js/ops.js" type="text/javascript"></script>
    <script src="js/UserJS.js" type="text/javascript"></script>
    <script src="js/jquery.datepicker.min.js" type="text/javascript"></script>
    <script src="js/jquery.template.min.js" type="text/javascript"></script>
    <script src="js/funds.js" type="text/javascript"></script>
<style type="text/css">
	.content{
		font-family:'宋体';
		font-size: 14px;
	}
	.content-row{
		text-align:center;
		margin-bottom: 5px;
		margin-top: 5px;
	}
	span {
		font-size: 15px;
		color:saddlebrown;
	}
	.button{
		color:brown;
		width:49px;
		height: 24px;
		font-size: 14px;
	}
	#update{
		border: 1px solid #c8cbd8; 
		margin-top:10px;
	}

</style>
</head>
<body>
    <div class="row" style="margin-top: 10px;">
    </div>
    <div class="row">
        <div class="u-menu">
            <ul class="u-nav" id="user_menu">
                <li class="item" id="user_menu_my" name="user_menu_my">
                    <h3 class="t1">
                        我的个人中心<span title="折叠"></span></h3>
                    <ul class="sub">
                        <li><a href="个人资料.jsp">个人资料</a></li><li><a href="认证管理.jsp">
                            认证管理</a></li><li><a href="密码管理.jsp">密码设置</a></ul>
                </li>
                
                <li class="item" id="user_menu_loan" name="user_menu_loan">
                    <h3 class="t3">
                        贷款管理<a name="user_login"></a><span title="折叠"></span></h3>
                    <ul class="sub">
                        <li><a href="queryRetmsgInfo.do">我的贷款</a></li><li><a href="queryRepaymentInfo.do?nper=${Nper }">偿还贷款</a></li><li><a href="LoanStatistics.do">
                            贷款统计</a></li></ul>
                </li>
            </ul>
            <script type="text/javascript">
                var menuClosed = Ops.getCookie('menuClosed');

                $(".item h3 span").click(function () {

                    menuClosed = Ops.getCookie('menuClosed');
                    if (menuClosed == undefined || menuClosed == null) {
                        menuClosed = '';
                        Ops.setCookie('menuClosed', menuClosed);
                    }
                    //console.log(menuClosed+',click;;;');	
                    $(this).parent().parent().toggleClass('bg-slide');
                    $(this).parent().parent().find(".sub").slideToggle('fast');

                    if ($(this).attr('title') == '折叠') {
                        $(this).attr('title', '展开');
                    } else {
                        $(this).attr('title', '折叠');
                    }

                    var pid = $(this).parent().parent().attr('id');

                    if ($(this).parent().parent().hasClass('bg-slide') && menuClosed.indexOf("#" + pid + "#") == -1) {
                        var cookies = menuClosed + '#' + pid + '#';
                    } else {
                        var cookies = menuClosed.replace("#" + pid + "#", '');
                    }
                    Ops.setCookie('menuClosed', cookies);
                });

                if (menuClosed != null) {
                    var closedMatch = menuClosed.match(/([a-z_]+)/g);
                    for (var i in closedMatch) {
                        var idObj = $('#' + closedMatch[i]);
                        idObj.toggleClass('bg-slide');
                        idObj.find(".sub").hide();
                        idObj.find('h3 span').attr('title', '展开');
                    }
                } else {
                    $("#user_menu_loan h3 span").click();
                }
            </script>
        </div>
        <!-- /.u-menu -->
        <div class="u-main">
            <div class="u-tab-wrap">
                <ul class="u-tab clearfix">
                    <li class="current"><a>待偿还贷款</a><!-- </li><li><a onclick="queryNewLoans()" id="queryNewLoans">已还清贷款</a></li> --><li style="display: none;">
                        <a>还款详情</a></li><li style="display: none;"><a>提前还款</a>
                    </li>
                </ul>
            </div>
            <div id="tab-box">
                <div id="repay_list_box" class="u-form-wrap" style="padding: 15px;">
                    <div style="margin-bottom: 20px;">
                        <table class="u-table th12 td12">
                            <tr>
                                <th width="10%">编号</th>
                                <th width="25%">贷款类型</th>
                                <th width="10%">应还金额</th>
                                <th width="8%">期限</th>
                                <th width="10%">期数</th>
                                <th width="10%">状态</th>
                                <th width="10%">操作</th>
                            </tr> 
                            <tr>
                                <td><a target="_blank" href="#" class="imp f14">1</a></td>
                             	<td>
                                    <a target="_blank"  class="imp f14">
										<c:forEach items="${fenqi}" var="fq">
	                                		<c:if test="${fq.fid eq ret_type}">${fq.fname }</c:if>	
	                                	</c:forEach>
									</a>
                                </td>
                                <td>
                                    <i class="red">￥${ret_money }</i>
                                </td>
                                <td>
                                	<c:forEach items="${fenqi}" var="fq">
                                			<c:if test="${fq.fid eq ret_type}">
                                				<c:if test="${Nper lt fq.qishu+1}">
                                					 <i class="red"><fmt:formatDate value="${ret_date }"/></i>
                                				</c:if>                        
                                			</c:if>	
                                	</c:forEach>
                                </td>
                                <td>
                                    <i class="red">
                                    <c:forEach items="${fenqi}" var="fq">
                                			<c:if test="${fq.fid eq ret_type}">
                                				<c:if test="${Nper lt fq.qishu+1}">
                                					${Nper }
                                				</c:if>                        
                                			</c:if>	
                                	</c:forEach>
                                    </i>
                                </td>
                                <td>
                                <c:if test="${sid eq 1}">待审核</c:if>
                                <c:if test="${sid eq 2}">审核中</c:if>
                                <c:if test="${sid eq 3}">审核通过</c:if>
                                <c:if test="${sid eq 4}">驳回</c:if>
                                　					<c:forEach items="${fenqi}" var="fq">
                                			<c:if test="${fq.fid eq ret_type}">
                                				<c:if test="${Nper gt fq.qishu}">
                                					贷款已还清 谢谢合作
                                				</c:if>                        
                                			</c:if>	
                                	</c:forEach>
                                </td>
                                <td class="i-item-btn">
                                <c:if test="${sid eq 3}">
                                	<c:forEach items="${fenqi}" var="fq">
                                			<c:if test="${fq.fid eq ret_type}">
                                				<c:if test="${Nper lt fq.qishu+1}">
                                					<input type="button" onclick="repayment()" id="repayment" value="还款" class="button">
                                				</c:if>                        
                                			</c:if>	
                                	</c:forEach>
                                	</c:if>
                                </td>    
                            </tr>
                        </table>
                    </div>
                    <div class="content" style="display:none;" id="update">
        				<div class="content-row">
							<input type="hidden" id="ret_type" value="${ret_type }">
                    		<h3>确认还款</h3>
                    	</div>
                    	<div class="content-row">
                    		<span>还款方式：</span>
                    		<span>余额还款</span>
                    	</div>
                    	<div class="content-row">
                    		<span>余额：</span>
                    		<span>￥${userInfo.balance}</span>
                    	</div>
                    	<div class="content-row">
                    		<span>本期应还：</span>
                    		<span>￥${ret_money }</span>
                    		<input type="hidden" id="ret_money" value="${ret_money }">
                    	</div>
                    	<div class="content-row" style="margin-top: 10px;margin-bottom: 20px;">
                    		<span id="mgs1">&nbsp;</span><br>
                    		<input class="button" type="button" value="确定" onclick="affirm()"/>
                    		<input class="button" type="button" value="取消" onclick="cancel()"/><br>
                    	</div>
                    </div>
                </div>
                    <div class="page-wrap">
                    </div>
                </div>
            </div>
        </div>
        <script type="text/javascript">
        	//弹出详情框
        	function repayment(){
        		$("#update").css("display","block");
			}
        	
        	//点击取消，跳转页面
        	function cancel(){
        		location.href="queryRepaymentInfo.do"; 
        	}

        	//点击确认
        	function affirm(){
        		$.ajax({
            		data:{"ret_type":$("#ret_type").val(),"ret_money":$("#ret_money").val()},
            		type:"post",
    				url:"payMoney.do",
    				dataType:"json",
    				success:function(data){
    					if(data.result=="errorMoney"){
    						$("#mgs1").html("您的余额不足！");
            				$("#mgs1").css("color","red"); 
    					}else{
    						$("#mgs1").html("&nbsp;");
            				$("#mgs1").css("color","white"); 
    						if(data.result==true){
    							location.href="repayment.do";
    							alert("支付成功");
    						}else {
    							alert("支付失败");
							}
    					}
    				},
    				error:function(){
    					alert("失败!");
    				}
            		
            	});   
        	}
   
        
			$("queryNewLoans").click("click",queryNewLoans);
			function queryNewLoans(){
				alert("111");
				location.href="queryNewLoans.do";
				/* location.href=""; */
			}              
            var $div_li = $(".u-tab-wrap ul li");
            $div_li.click(function () {
                $(this).addClass("current").siblings().removeClass("current");
                var div_index = $div_li.index(this);
                $("#tab-box>div").eq(div_index).show().siblings().hide();
            }).hover(function () {
                $(this).addClass("hover");
            }, function () {
                $(this).removeClass("hover");

            });
        </script>
    </div>
</body>
</html>